<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if lte IE 9]><script>(function(f){window.setTimeout=f(window.setTimeout);window.setInterval=f(window.setInterval)})(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});</script><![endif]-->
<!--[if IE 8]><script src="https://cdn.bootcss.com/ie8/0.8.0/ie8.js"></script><![endif]-->
<script src="https://cdn.bootcss.com/dom4/1.8.5/dom4.max.js"></script>
<!--[if IE 8]>
<script src="assets/js/dre-ie8-upfront-fix.max.js"></script>
<![endif]-->
<script src="https://cdn.bootcss.com/document-register-element/1.7.0/document-register-element.js"></script>
<!--[if IE 8]>
<script src="https://cdn.bootcss.com/es5-shim/4.5.10/es5-shim.js"></script>
<script src="https://cdn.bootcss.com/es5-shim/4.5.10/es5-sham.js"></script>
<![endif]-->

<script>
(function() {
  Object.defineProperty(HTMLInputElement.prototype, "auiValue", {
    get: function() {
      return this.value;
    },
    set: function(newval) {
      if (
          (this.hasAttribute("polyfill-input-type") && this.getAttribute("polyfill-input-type") === "number") || 
          this.type === "number"
      ) {
        if (!(/^-?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?$/.test(newval))) {
            console.warn('The specified value " '+newval.toString()+' " is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?');
            return;
        }
      }

      this.value = newval;
    }
  });
})(); 
</script>



    <link rel="stylesheet" href="../../ui.css?v=1958702656">
    
<link rel="stylesheet" href="message/assets/css/index.css?v=398245320">
<link rel="stylesheet" href="message/assets/css/message.css?v=802377587">
<link rel="stylesheet" href="./index.css?v=1125973089">
<link rel="stylesheet" href="../grid/index.css?v=432876803">
<!--[if !IE]><!--><script src="https://cdn.bootcss.com/prism/9000.0.1/prism.min.js"></script><!--<![endif]-->
<style>
/* 导出用 */
body {        
    background: #fff;
}
.app-pyq-msg__after {        
    background-color: #f0f0f0;
}
.app-pyq-msg__content {
    width: 360px;
}
.exp-export .app-pyq-msg__content {
    width: 740px;
}
.u-clear-fix:after {
    content: "";
    display: table;
    clear: both;
}
.ellip {
  display: block;
  height: 100%;
}

.ellip-line {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
}

.ellip,
.ellip-line {
  position: relative;
  overflow: hidden;
}


nav > a {
   cursor: pointer;
}
nav > a.active {
    color: #0099FF;
}
.container {
    display: none;
}
.container.open {
    display: block;
}
.a-certificate {
    width: 431px;
}
.aux-preview-code {
    padding: 10px;
    display: none;
}
.aux-preview-code.active {
    display: block;
}
.aux-preview-code:before {
    content: "code:";
    display: block;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
pre {
    max-height: 180px;
}
</style>

</head>
<body>

<link href="https://cdn.bootcss.com/prism/9000.0.1/themes/prism.css" rel="stylesheet">
    <nav id="nav">
        <a for="pongyouquan">朋友圈</a>
        <a for="jiaoyi">交易</a>        
        <a for="friendszhuanzhang">好友转账</a>
    </nav>
    <main id="content">
        



<style>
    .exp-chat .app-pyq-msg > .u-list {
        display: flex;
        flex-direction: row-reverse;
    }
    .exp-chat .app-pyq-msg__title {
        text-align: right;
    }
    .exp-chat .app-pyq-msg__body > .u-list  {
        display: flex;
        flex-direction: row-reverse;
    }
    .exp-chat .app-pyq-gallery {
        display: flex;
        flex-direction: row-reverse;
    }
    .exp-chat .app-pyq-msg__location {
        text-align: right;
    }
    .exp-chat .app-pyq-msg__after:before {
        right: 14px;
    }
</style>

<div id="pongyouquan" class="container">
    <h3>模板文件实现</h3>
    
    <div id="control">
        
            
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">文磊（<span>1975-08-01 20:06:30</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                                
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-5 app-pyq-msg__bodycontent app-pyq-msg__text">
                                <div class="u-text-b-w app-pyq-msg__main">劳点酸查习包打深建济学格观样。</div>
                            </div>
                                            
                        
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-l">
                                
                                <div class="u-list-item">
                                    <img class="u-list--item app-pyq-msg__location-icon u-m-r-4"
                                         src="./penyouquan/assets/images/circle-of-friends_icon_location.png">
                                </div>
                                
                                <div class="u-list-item"><div class="u-fz-12">分享内容地点</div></div>
                            </div>
                        
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">易刚</div>
                                                
                                                    <div class="u-list-item">胡伟</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                            <div class="app-gutter"></div>
                        
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="app-pyq-msg__comments">
                                    
                                        <div class="u-list u-list--h u-list--table u-list--cross-top app-pyq-msg__comment u-m-t-5">
                                            <div class="u-list-item"><div>Eric Lopez评论Jennifer Johnson</div></div>
                                            <div class="u-list-item">:</div>
                                            <div class="u-list-item"><div class="u-text-b-w">却已山走走局算温战维间劳县世太。</div></div>
                                        </div>
                                    
                                </div>
                            </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            <div class="aux-preview-code"><pre class="content"></pre></div>
            <h5>导出</h5>
            <div class="exp-export">
                
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">文磊（<span>1975-08-01 20:06:30</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                                
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-5 app-pyq-msg__bodycontent app-pyq-msg__text">
                                <div class="u-text-b-w app-pyq-msg__main">劳点酸查习包打深建济学格观样。</div>
                            </div>
                                            
                        
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-l">
                                
                                <div class="u-list-item">
                                    <img class="u-list--item app-pyq-msg__location-icon u-m-r-4"
                                         src="./penyouquan/assets/images/circle-of-friends_icon_location.png">
                                </div>
                                
                                <div class="u-list-item"><div class="u-fz-12">分享内容地点</div></div>
                            </div>
                        
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">易刚</div>
                                                
                                                    <div class="u-list-item">胡伟</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                            <div class="app-gutter"></div>
                        
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="app-pyq-msg__comments">
                                    
                                        <div class="u-list u-list--h u-list--table u-list--cross-top app-pyq-msg__comment u-m-t-5">
                                            <div class="u-list-item"><div>Eric Lopez评论Jennifer Johnson</div></div>
                                            <div class="u-list-item">:</div>
                                            <div class="u-list-item"><div class="u-text-b-w">却已山走走局算温战维间劳县世太。</div></div>
                                        </div>
                                    
                                </div>
                            </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            </div>
            <div class="aux-preview-code"><pre class="content"></pre></div>
        
            
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">邵静（<span>1986-11-29 11:48:50</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                                
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-5 app-pyq-msg__bodycontent app-pyq-msg__text">
                                <div class="u-text-b-w app-pyq-msg__main">华院层温增人划精青人什米至团。</div>
                            </div>
                                            
                        
                        
                        <div class="u-m-b-10">
                            
                                <div class="auc-grid app-pyq-gallery app-pyq-gallery--img"><div class="auc-grid__inner">
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                    </div></div>
                            
                            
                        </div>
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-l">
                                
                                <div class="u-list-item">
                                    <img class="u-list--item app-pyq-msg__location-icon u-m-r-4"
                                         src="./penyouquan/assets/images/circle-of-friends_icon_location.png">
                                </div>
                                
                                <div class="u-list-item"><div class="u-fz-12">s市</div></div>
                            </div>
                        
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">David Davis</div>
                                                
                                                    <div class="u-list-item">Betty Lee</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                            <div class="app-gutter"></div>
                        
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="app-pyq-msg__comments">
                                    
                                        <div class="u-list u-list--h u-list--table u-list--cross-top app-pyq-msg__comment u-m-t-5">
                                            <div class="u-list-item"><div>Eric Lopez评论Jennifer Johnson</div></div>
                                            <div class="u-list-item">:</div>
                                            <div class="u-list-item"><div class="u-text-b-w">却已山走走局算温战维间劳县世太。</div></div>
                                        </div>
                                    
                                </div>
                            </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            <div class="aux-preview-code"><pre class="content"></pre></div>
            <h5>导出</h5>
            <div class="exp-export">
                
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">邵静（<span>1986-11-29 11:48:50</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                                
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-5 app-pyq-msg__bodycontent app-pyq-msg__text">
                                <div class="u-text-b-w app-pyq-msg__main">华院层温增人划精青人什米至团。</div>
                            </div>
                                            
                        
                        
                        <div class="u-m-b-10">
                            
                                <div class="auc-grid app-pyq-gallery app-pyq-gallery--img"><div class="auc-grid__inner">
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></div>
                                        
                                    </div></div>
                            
                            
                        </div>
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-l">
                                
                                <div class="u-list-item">
                                    <img class="u-list--item app-pyq-msg__location-icon u-m-r-4"
                                         src="./penyouquan/assets/images/circle-of-friends_icon_location.png">
                                </div>
                                
                                <div class="u-list-item"><div class="u-fz-12">s市</div></div>
                            </div>
                        
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">David Davis</div>
                                                
                                                    <div class="u-list-item">Betty Lee</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                            <div class="app-gutter"></div>
                        
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="app-pyq-msg__comments">
                                    
                                        <div class="u-list u-list--h u-list--table u-list--cross-top app-pyq-msg__comment u-m-t-5">
                                            <div class="u-list-item"><div>Eric Lopez评论Jennifer Johnson</div></div>
                                            <div class="u-list-item">:</div>
                                            <div class="u-list-item"><div class="u-text-b-w">却已山走走局算温战维间劳县世太。</div></div>
                                        </div>
                                    
                                </div>
                            </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            </div>
            <div class="aux-preview-code"><pre class="content"></pre></div>
        
            
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">陈静（<span>1977-02-03 12:18:44</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                            
                        
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-10  app-pyq-msg__bodycontent app-pyq-msg__link u-c-w-full">
                                <div class="u-list-item u-p-r-5"><img class="u-list--item app-pyq-msg__bodycontent-icon"
                                                                      src="./global/assets/images/global_icon_location.png"></div>
                                <div class="u-list-item"><div class="u-text-b-w app-pyq-msg__main">Swccltlhp sckhk wzwll mlnrvt sqmx pyxnckatf vyyn ykl lrrnnujqo.</div></div>
                            </div>
                        
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-r u-p-t-3">
                                <div class="u-list-item"><div class="u-fz-12">来自今日头条</div></div>
                            </div>
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            <div class="aux-preview-code"><pre class="content"></pre></div>
            <h5>导出</h5>
            <div class="exp-export">
                
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">陈静（<span>1977-02-03 12:18:44</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                            
                        
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-10  app-pyq-msg__bodycontent app-pyq-msg__link u-c-w-full">
                                <div class="u-list-item u-p-r-5"><img class="u-list--item app-pyq-msg__bodycontent-icon"
                                                                      src="./global/assets/images/global_icon_location.png"></div>
                                <div class="u-list-item"><div class="u-text-b-w app-pyq-msg__main">Swccltlhp sckhk wzwll mlnrvt sqmx pyxnckatf vyyn ykl lrrnnujqo.</div></div>
                            </div>
                        
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-r u-p-t-3">
                                <div class="u-list-item"><div class="u-fz-12">来自今日头条</div></div>
                            </div>
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            </div>
            <div class="aux-preview-code"><pre class="content"></pre></div>
        
            
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">陈静（<span>1977-02-03 12:18:44</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                                
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-5 app-pyq-msg__bodycontent app-pyq-msg__text">
                                <div class="u-text-b-w app-pyq-msg__main">劳点酸查习包打深建济学格观样。</div>
                            </div>
                                            
                        
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-10  app-pyq-msg__bodycontent app-pyq-msg__link u-c-w-full">
                                <div class="u-list-item u-p-r-5"><img class="u-list--item app-pyq-msg__bodycontent-icon"
                                                                      src="./global/assets/images/global_icon_link.png"></div>
                                <div class="u-list-item"><div class="u-text-b-w app-pyq-msg__main">Swccltlhp sckhk wzwll mlnrvt sqmx pyxn是多少是滴是滴所ckatf vyyn yklxl ahhj pmemmt使得 unhfgiu xssheldhx urkykmhqum cgryk jhosnibh mmhcwrj lrrnnujqo.</div></div>
                            </div>
                        
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-l">
                                
                                <div class="u-list-item">
                                    <img class="u-list--item app-pyq-msg__location-icon u-m-r-4"
                                         src="./penyouquan/assets/images/circle-of-friends_icon_location.png">
                                </div>
                                
                                <div class="u-list-item"><div class="u-fz-12">黄明</div></div>
                            </div>
                        
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-r u-p-t-3">
                                <div class="u-list-item"><div class="u-fz-12">来自今日头条</div></div>
                            </div>
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">Michael Smith</div>
                                                
                                                    <div class="u-list-item">David Lewis</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            <div class="aux-preview-code"><pre class="content"></pre></div>
            <h5>导出</h5>
            <div class="exp-export">
                
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">陈静（<span>1977-02-03 12:18:44</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                                
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-5 app-pyq-msg__bodycontent app-pyq-msg__text">
                                <div class="u-text-b-w app-pyq-msg__main">劳点酸查习包打深建济学格观样。</div>
                            </div>
                                            
                        
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-10  app-pyq-msg__bodycontent app-pyq-msg__link u-c-w-full">
                                <div class="u-list-item u-p-r-5"><img class="u-list--item app-pyq-msg__bodycontent-icon"
                                                                      src="./global/assets/images/global_icon_link.png"></div>
                                <div class="u-list-item"><div class="u-text-b-w app-pyq-msg__main">Swccltlhp sckhk wzwll mlnrvt sqmx pyxn是多少是滴是滴所ckatf vyyn yklxl ahhj pmemmt使得 unhfgiu xssheldhx urkykmhqum cgryk jhosnibh mmhcwrj lrrnnujqo.</div></div>
                            </div>
                        
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-l">
                                
                                <div class="u-list-item">
                                    <img class="u-list--item app-pyq-msg__location-icon u-m-r-4"
                                         src="./penyouquan/assets/images/circle-of-friends_icon_location.png">
                                </div>
                                
                                <div class="u-list-item"><div class="u-fz-12">黄明</div></div>
                            </div>
                        
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-r u-p-t-3">
                                <div class="u-list-item"><div class="u-fz-12">来自今日头条</div></div>
                            </div>
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">Michael Smith</div>
                                                
                                                    <div class="u-list-item">David Lewis</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            </div>
            <div class="aux-preview-code"><pre class="content"></pre></div>
        
            
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">陈静（<span>1977-02-03 12:18:44</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                            
                        
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-10  app-pyq-msg__bodycontent app-pyq-msg__link u-c-w-full">
                                <div class="u-list-item u-p-r-5"><img class="u-list--item app-pyq-msg__bodycontent-icon"
                                                                      src="./global/assets/images/global_icon_link.png"></div>
                                <div class="u-list-item"><div class="u-text-b-w app-pyq-msg__main">Swccltlhp sckhk wzwll mlnrvt sqmx pyxn是多少是滴是滴所ckatf vyyn yklxl ahhj pmemmt使得 unhfgiu xssheldhx urkykmhqum cgryk jhosnibh mmhcwrj lrrnnujqo.</div></div>
                            </div>
                        
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-l">
                                
                                <div class="u-list-item">
                                    <img class="u-list--item app-pyq-msg__location-icon u-m-r-4"
                                         src="./penyouquan/assets/images/circle-of-friends_icon_location.png">
                                </div>
                                
                                <div class="u-list-item"><div class="u-fz-12">黄明</div></div>
                            </div>
                        
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-r u-p-t-3">
                                <div class="u-list-item"><div class="u-fz-12">来自今日头条</div></div>
                            </div>
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">Michael Smith</div>
                                                
                                                    <div class="u-list-item">David Lewis</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            <div class="aux-preview-code"><pre class="content"></pre></div>
            <h5>导出</h5>
            <div class="exp-export">
                
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">陈静（<span>1977-02-03 12:18:44</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                            
                        
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-10  app-pyq-msg__bodycontent app-pyq-msg__link u-c-w-full">
                                <div class="u-list-item u-p-r-5"><img class="u-list--item app-pyq-msg__bodycontent-icon"
                                                                      src="./global/assets/images/global_icon_link.png"></div>
                                <div class="u-list-item"><div class="u-text-b-w app-pyq-msg__main">Swccltlhp sckhk wzwll mlnrvt sqmx pyxn是多少是滴是滴所ckatf vyyn yklxl ahhj pmemmt使得 unhfgiu xssheldhx urkykmhqum cgryk jhosnibh mmhcwrj lrrnnujqo.</div></div>
                            </div>
                        
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-l">
                                
                                <div class="u-list-item">
                                    <img class="u-list--item app-pyq-msg__location-icon u-m-r-4"
                                         src="./penyouquan/assets/images/circle-of-friends_icon_location.png">
                                </div>
                                
                                <div class="u-list-item"><div class="u-fz-12">黄明</div></div>
                            </div>
                        
                        
                            <div class="u-list u-list--h u-list--cross-center u-m-b-5 app-pyq-msg__location u-fz-0 u-c-float-r u-p-t-3">
                                <div class="u-list-item"><div class="u-fz-12">来自今日头条</div></div>
                            </div>
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">Michael Smith</div>
                                                
                                                    <div class="u-list-item">David Lewis</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            </div>
            <div class="aux-preview-code"><pre class="content"></pre></div>
        
            
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">戴刚（<span>1979-04-26 02:56:32</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                                
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-5 app-pyq-msg__bodycontent app-pyq-msg__text">
                                <div class="u-text-b-w app-pyq-msg__main">县间采品应提华使思适干当设立难式共与。</div>
                            </div>
                                            
                        
                        
                        <div class="u-m-b-10">
                            
                            
                                <div class="auc-grid app-pyq-gallery app-pyq-gallery--video"><div class="auc-grid__inner">
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="./penyouquan/assets/images/circle-of-friends_video_normel.png"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="./penyouquan/assets/images/circle-of-friends_video_normel.png"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="./penyouquan/assets/images/circle-of-friends_video_normel.png"></div>
                                        
                                    </div></div>
                            
                        </div>
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">易刚</div>
                                                
                                                    <div class="u-list-item">胡伟</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                            <div class="app-gutter"></div>
                        
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="app-pyq-msg__comments">
                                    
                                        <div class="u-list u-list--h u-list--table u-list--cross-top app-pyq-msg__comment u-m-t-5">
                                            <div class="u-list-item"><div>Eric Lopez评论Jennifer Johnson</div></div>
                                            <div class="u-list-item">:</div>
                                            <div class="u-list-item"><div class="u-text-b-w">却已山走走局算温战维间劳县世太。</div></div>
                                        </div>
                                    
                                </div>
                            </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            <div class="aux-preview-code"><pre class="content"></pre></div>
            <h5>导出</h5>
            <div class="exp-export">
                
    <div class="app-pyq-msg u-m-b-20">
        <div class="u-list u-list--h u-list--cross-top app-pyq-msg__inner">
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__aside">
                <object class="u-list--item app-pyq-msg__avatar"
                        data="https://static.zhilizhili.com/static/3828461873613813290.jpg">
                    <img  class="app-pyq-msg__avatar" src="./penyouquan/assets/images/circle-of-friends_icon_user.png">
                </object>
            </div>
            <div class="u-list-item app-pyq-msg__item app-pyq-msg__content">
                <div class="app-pyq-msg__title">戴刚（<span>1979-04-26 02:56:32</span>）</div>
                
                    <div class="app-pyq-msg__body">
                                                
                            <div class="u-list u-list--h u-list--cross-top u-list--table u-m-b-5 app-pyq-msg__bodycontent app-pyq-msg__text">
                                <div class="u-text-b-w app-pyq-msg__main">县间采品应提华使思适干当设立难式共与。</div>
                            </div>
                                            
                        
                        
                        <div class="u-m-b-10">
                            
                            
                                <div class="auc-grid app-pyq-gallery app-pyq-gallery--video"><div class="auc-grid__inner">
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="./penyouquan/assets/images/circle-of-friends_video_normel.png"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="./penyouquan/assets/images/circle-of-friends_video_normel.png"></div>
                                        
                                            <div class="auc-item"><img class="u-list--item app-pyq-gallery__avatar"
                                                                       src="./penyouquan/assets/images/circle-of-friends_video_normel.png"></div>
                                        
                                    </div></div>
                            
                        </div>
                        
                    </div>
                
                <div class="app-pyq-msg__footer">
                    <div class="app-pyq-msg__actions u-clear-fix">
                        
                                                
                    </div>
                    <div class="app-pyq-msg__after">
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="u-list u-list--h u-list--table u-list--cross-top">
                                    <div class="u-list-item"><div>点赞：</div></div>
                                    <div class="u-list-item">
                                        <div class="u-of-hidden">
                                            <div class="u-list u-list--float app-pyq-msg__firends">
                                                
                                                    <div class="u-list-item">易刚</div>
                                                
                                                    <div class="u-list-item">胡伟</div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        
                            <div class="app-gutter"></div>
                        
                        
                            <div class="u-p-h-10 u-p-v-10">
                                <div class="app-pyq-msg__comments">
                                    
                                        <div class="u-list u-list--h u-list--table u-list--cross-top app-pyq-msg__comment u-m-t-5">
                                            <div class="u-list-item"><div>Eric Lopez评论Jennifer Johnson</div></div>
                                            <div class="u-list-item">:</div>
                                            <div class="u-list-item"><div class="u-text-b-w">却已山走走局算温战维间劳县世太。</div></div>
                                        </div>
                                    
                                </div>
                            </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

            </div>
            <div class="aux-preview-code"><pre class="content"></pre></div>
        
    </div>
</div>
        <style>
.a-certificate {
    margin: 0 auto;
}
</style>


<div id="jiaoyi" class="container">
    
        <h3> 演示 1 </h3>
        <h4>预览格式</h4>
        <div class="a-certificate u-p-h-12 u-p-v-12">
            <div class="a-certificate__title u-p-b-10">
                <div class="u-list u-list--cross-center u-list--main--justify">
                <div
                            class="u-list-item u-m-r-8 u-fz-14">全家便利店</div>
<div
                            class="u-list-item u-fz-12">1996-11-03 05:13:09</div>
                </div>
            </div>

            <div class="u-p-v-10">
                <div class="a-certificate__money-title u-text-center u-p-b-10">付款金额</div>
                <div class="a-certificate__money u-text-center u-p-b-10 u-fz-18">¥42.00</div>
            </div>
            
                <div class="a-certificate__record u-state-warning u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">附加信息</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">微信支付到店红包¥0.15</div>
                    </div>
                </div>
            
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>

        <h4>导出格式</h4>
        <table class="app-table-jiaoyi">
            <tbody>
            <tr>
                <td rowspan="5">1.</td>
                <td rowspan="5">
                    <div class="cell">全家便利店</div>
                </td>
                <td>
                    <table class="app-table-jiaoyi__sub">
                        <tbody>
                        <tr class="app-table-jiaoyi__normal">
                            <td><div class="cell">日期</div></td>
                            <td><div class="cell">1996-11-03 05:13:09</div></td>
                        </tr>
                        <tr class="app-table-jiaoyi__strong">
                            <td><div class="cell">付款金额</div></td>
                            <td><div class="cell">¥42.00</div></td>
                        </tr>
                        
                            <tr class="app-table-jiaoyi__warning">
                                <td><div class="cell">附加信息</div></td>
                                <td><div class="cell">微信支付到店红包¥0.15</div></td>
                            </tr>
                        
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    
        <h3> 演示 2 </h3>
        <h4>预览格式</h4>
        <div class="a-certificate u-p-h-12 u-p-v-12">
            <div class="a-certificate__title u-p-b-10">
                <div class="u-list u-list--cross-center u-list--main--justify">
                <div
                            class="u-list-item u-m-r-8 u-fz-14">退款到账通知</div>
<div
                            class="u-list-item u-fz-12">1980-04-08 11:21:51</div>
                </div>
            </div>

            <div class="u-p-v-10">
                <div class="a-certificate__money-title u-text-center u-p-b-10">退款金额</div>
                <div class="a-certificate__money u-text-center u-p-b-10 u-fz-18">¥42.00</div>
            </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">商品详情</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">美团订单－201712345678123456781234</div>
                    </div>
                </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">商户名称</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">大众点评</div>
                    </div>
                </div>
            
                <div class="a-certificate__record u-state-warning u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">退款方式</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">退回零钱</div>
                    </div>
                </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">到账时间</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">2018-03-12 08:59:33</div>
                    </div>
                </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">交易单号</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">201712345678123456781234</div>
                    </div>
                </div>
            
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>

        <h4>导出格式</h4>
        <table class="app-table-jiaoyi">
            <tbody>
            <tr>
                <td rowspan="5">1.</td>
                <td rowspan="5">
                    <div class="cell">退款到账通知</div>
                </td>
                <td>
                    <table class="app-table-jiaoyi__sub">
                        <tbody>
                        <tr class="app-table-jiaoyi__normal">
                            <td><div class="cell">日期</div></td>
                            <td><div class="cell">1980-04-08 11:21:51</div></td>
                        </tr>
                        <tr class="app-table-jiaoyi__strong">
                            <td><div class="cell">退款金额</div></td>
                            <td><div class="cell">¥42.00</div></td>
                        </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">商品详情</div></td>
                                <td><div class="cell">美团订单－201712345678123456781234</div></td>
                            </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">商户名称</div></td>
                                <td><div class="cell">大众点评</div></td>
                            </tr>
                        
                            <tr class="app-table-jiaoyi__warning">
                                <td><div class="cell">退款方式</div></td>
                                <td><div class="cell">退回零钱</div></td>
                            </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">到账时间</div></td>
                                <td><div class="cell">2018-03-12 08:59:33</div></td>
                            </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">交易单号</div></td>
                                <td><div class="cell">201712345678123456781234</div></td>
                            </tr>
                        
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    
        <h3> 演示 3 </h3>
        <h4>预览格式</h4>
        <div class="a-certificate u-p-h-12 u-p-v-12">
            <div class="a-certificate__title u-p-b-10">
                <div class="u-list u-list--cross-center u-list--main--justify">
                <div
                            class="u-list-item u-m-r-8 u-fz-14">红包退回通知</div>
<div
                            class="u-list-item u-fz-12">1970-11-01 02:10:32</div>
                </div>
            </div>

            <div class="u-p-v-10">
                <div class="a-certificate__money-title u-text-center u-p-b-10">退款金额</div>
                <div class="a-certificate__money u-text-center u-p-b-10 u-fz-18">¥42.00</div>
            </div>
            
                <div class="a-certificate__record u-state-warning u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">退款方式</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">退回零钱</div>
                    </div>
                </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">到账时间</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">2018-03-12 08:59:33</div>
                    </div>
                </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">退款原因</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">红包超过24小时未被领取</div>
                    </div>
                </div>
            
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>

        <h4>导出格式</h4>
        <table class="app-table-jiaoyi">
            <tbody>
            <tr>
                <td rowspan="5">1.</td>
                <td rowspan="5">
                    <div class="cell">红包退回通知</div>
                </td>
                <td>
                    <table class="app-table-jiaoyi__sub">
                        <tbody>
                        <tr class="app-table-jiaoyi__normal">
                            <td><div class="cell">日期</div></td>
                            <td><div class="cell">1970-11-01 02:10:32</div></td>
                        </tr>
                        <tr class="app-table-jiaoyi__strong">
                            <td><div class="cell">退款金额</div></td>
                            <td><div class="cell">¥42.00</div></td>
                        </tr>
                        
                            <tr class="app-table-jiaoyi__warning">
                                <td><div class="cell">退款方式</div></td>
                                <td><div class="cell">退回零钱</div></td>
                            </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">到账时间</div></td>
                                <td><div class="cell">2018-03-12 08:59:33</div></td>
                            </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">退款原因</div></td>
                                <td><div class="cell">红包超过24小时未被领取</div></td>
                            </tr>
                        
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    
        <h3> 演示 4 </h3>
        <h4>预览格式</h4>
        <div class="a-certificate u-p-h-12 u-p-v-12">
            <div class="a-certificate__title u-p-b-10">
                <div class="u-list u-list--cross-center u-list--main--justify">
                <div
                            class="u-list-item u-m-r-8 u-fz-14">商家付款入账通知</div>
<div
                            class="u-list-item u-fz-12">1986-04-14 12:53:50</div>
                </div>
            </div>

            <div class="u-p-v-10">
                <div class="a-certificate__money-title u-text-center u-p-b-10">入账金额</div>
                <div class="a-certificate__money u-text-center u-p-b-10 u-fz-18">¥42.00</div>
            </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">入账账户</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">零钱</div>
                    </div>
                </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">付款商户</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">包你说</div>
                    </div>
                </div>
            
                <div class="a-certificate__record u-state-normal u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">入账详情</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">包你懂提现</div>
                    </div>
                </div>
            
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>

        <h4>导出格式</h4>
        <table class="app-table-jiaoyi">
            <tbody>
            <tr>
                <td rowspan="5">1.</td>
                <td rowspan="5">
                    <div class="cell">商家付款入账通知</div>
                </td>
                <td>
                    <table class="app-table-jiaoyi__sub">
                        <tbody>
                        <tr class="app-table-jiaoyi__normal">
                            <td><div class="cell">日期</div></td>
                            <td><div class="cell">1986-04-14 12:53:50</div></td>
                        </tr>
                        <tr class="app-table-jiaoyi__strong">
                            <td><div class="cell">入账金额</div></td>
                            <td><div class="cell">¥42.00</div></td>
                        </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">入账账户</div></td>
                                <td><div class="cell">零钱</div></td>
                            </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">付款商户</div></td>
                                <td><div class="cell">包你说</div></td>
                            </tr>
                        
                            <tr class="app-table-jiaoyi__normal">
                                <td><div class="cell">入账详情</div></td>
                                <td><div class="cell">包你懂提现</div></td>
                            </tr>
                        
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    
</div>
        
<div id="friendszhuanzhang" class="container">
    
        <div class="app-transfer-msg wechat_transfer_normel">
            <div class="u-fz-16 app-transfer-msg__money">¥1517.59</div>
            <div class="u-fz-12 app-transfer-msg__name">转账给邵强</div>
            
            <img src="./transfer/assets/images/wechat_transfer_normel.png" alt="">
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    
        <div class="app-transfer-msg wechat_transfer_get">
            <div class="u-fz-16 app-transfer-msg__money">¥11863.15</div>
            <div class="u-fz-12 app-transfer-msg__name">已收钱</div>
            
            <img src="./transfer/assets/images/wechat_transfer_get.png" alt="">
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    

    
        <div class="app-transfer-msg wechat_transfer_normel">
            <div class="u-fz-16 app-transfer-msg__money">活动账单</div>
            <div class="u-fz-12 app-transfer-msg__name">还有一人未支付</div>
            
                <div class="u-fz-12 app-transfer-msg__content">共收款199元，已收款150元</div>
            
            <img src="./transfer/assets/images/wechat_group-of-collection_normel.png" alt="">
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    
        <div class="app-transfer-msg wechat_transfer_get">
            <div class="u-fz-16 app-transfer-msg__money">活动账单</div>
            <div class="u-fz-12 app-transfer-msg__name">支付完成</div>
            
                <div class="u-fz-12 app-transfer-msg__content">共收款199元，已收款199元</div>
            
            <img src="./transfer/assets/images/wechat_group-of-collection_get.png" alt="">
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    
        <div class="app-transfer-msg wechat_transfer_normel2">
            <div class="u-fz-16 app-transfer-msg__money">活动账单</div>
            <div class="u-fz-12 app-transfer-msg__name">待支付</div>
            
            <img src="./transfer/assets/images/wechat_group-of-collection_normel2.png" alt="">
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    
</div>
    </main>    

    <script>
function getTextWidth(text, font) {        
    // re-use canvas object for better performance                    
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");    
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;    
}
var isIE = '\v'=='v';

        window.onload = function() {
            var lists = document.querySelectorAll(".app-pyq-msg__link .app-pyq-msg__main");
            if (lists) {
                Array.prototype.slice.call(lists).forEach(function(v) {                
                    if (v.scrollHeight > v.offsetHeight) {
                        
                        if (!isIE) {
                            var w = 1;
                            //var computedStyle = window.getComputedStyle(v);
                            var font = 'normal normal 400 normal 14px / 20px Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, tahoma, arial, "WenQuanYi Micro Hei", Verdana, sans-serif';
                            var lock = true;
                            var index = 10;    
                            var str  = "";         
                            var lastlen =  0;           
                            
                            var fz = 15;
                            var firstlineindex = 0;
                            while (lock) {
                                if (index > v.textContent.length - 1) {
                                    lock = false;
                                }
                                str = v.textContent.substr(lastlen, index);
                                w = getTextWidth(str, font);
                                if (w > v.offsetWidth - fz) {
                                    lock = false;
                                    firstlineindex = index;
                                } else {
                                    index++;
                                }
                            }
                            lock = true;
                            lastlen =  index; 
                            index = 1;                        
                            while (lock) {
                                if (index > v.textContent.length - 1) {
                                    lock = false;
                                }
                                str = v.textContent.substr(lastlen, index);
                                w = getTextWidth(str, font);
                                if (w > v.offsetWidth - fz) {
                                    lock = false;
                                } else {
                                    index++;
                                }
                            }
                            v.setAttribute("title", v.textContent);
                            console.log("cut", font, v.textContent.substring(0, (firstlineindex + index - 1)).trim());
                            v.textContent = v.textContent.substring(0, (firstlineindex + index - 1)).trim() + "...";            
                        } else {
                            v.classList.add("multi-line-overflow")
                        }
                    } 
                });
            }
        }
    </script>

    
    <script src="./not-include-index.js?v=749412018"></script>

</body>
</html>
